import 'package:cgvc/basis/basis_provider_widget.dart';
import 'package:cgvc/basis/scroll_top_model.dart';
import 'package:cgvc/util/resource_util.dart';
import 'package:cgvc/view_model/article_view_model.dart';
import 'package:cgvc/view_model/theme_view_model.dart';
import 'package:cgvc/widget/skeleton.dart';
import 'package:flutter/material.dart';

final double leading = 1.0;
final double textLineHeight = 0.5;
final letterSpacing = 1.0;

class ArticleItemWidget extends StatefulWidget {
  ArticleItemWidget({
    Key key,
    this.url,
  }) : super(key: key);
  final String url;
  @override
  State<StatefulWidget> createState() {
    return _ArticleItemWidgetState();
  }
}

class _ArticleItemWidgetState extends State<ArticleItemWidget>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return BasisRefreshListProviderWidget<ArticleViewModel, ScrollTopModel>(
      model1: ArticleViewModel(widget.url),
      model2: null,
      //加载中占位
      loadingBuilder: (context, model1, model2, child) {
        return SkeletonList(builder: (context, index) {
          return ArticleSkeleton();
        });
      },
      itemBuilder: (context, model, index) {
        return Text(
          '数据-$index',
          style: Theme.of(context).textTheme.bodyText1.copyWith(fontSize: 15),
          textScaleFactor: ThemeViewModel.textScaleFactor,
        );
      },
    );
  }

  @override
  bool get wantKeepAlive => true;
}

//文章item骨架屏效果
class ArticleSkeleton extends StatelessWidget {
  ArticleSkeleton();
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 12),
      margin: EdgeInsets.symmetric(horizontal: 12),

      //分割线
      decoration: BoxDecoration(
        border: Decorations.lineBoxBorder(
          context,
          bottom: true,
          width: 20,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          //标题
          SkeletonBox(
            width: MediaQuery.of(context).size.width * 0.9,
            height: 16,
            margin: EdgeInsets.only(top: 4, bottom: 4),
          ),

          //摘要
          SkeletonBox(
            width: MediaQuery.of(context).size.width * 0.75,
            height: 10,
            margin: EdgeInsets.only(bottom: 5),
          ),
          SkeletonBox(
            width: MediaQuery.of(context).size.width * 0.6,
            height: 10,
            margin: EdgeInsets.only(bottom: 5),
          ),
          SkeletonBox(
            width: MediaQuery.of(context).size.width * 0.45,
            height: 10,
            margin: EdgeInsets.only(bottom: 5),
          ),
          Row(
            children: <Widget>[
              SkeletonBox(
                width: 36,
                height: 16,
                margin: EdgeInsets.only(bottom: 7),
              ),
              Expanded(
                flex: 1,
                child: SizedBox(),
              ),
              SkeletonBox(
                width: 40,
                height: 20,
                margin: EdgeInsets.only(bottom: 7),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
